
// src/pages/VMDetail/SnapshotsTab.tsx（快照管理标签页 - 可选）
import React, { useState } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  message,
  Popconfirm,
} from 'antd';
import type { TableColumnsType } from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  RollbackOutlined,
  CameraOutlined,
} from '@ant-design/icons';

interface Snapshot {
  id: string;
  name: string;
  description: string;
  created_at: string;
  size: number;
}

interface SnapshotsTabProps {
  vmName: string;
}

const SnapshotsTab: React.FC<SnapshotsTabProps> = ({ vmName }) => {
  const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();

  const handleCreate = async (values: { name: string; description: string }) => {
    try {
      // 调用创建快照 API
      message.success('快照创建成功');
      setModalVisible(false);
      form.resetFields();
      // 刷新快照列表
    } catch (error) {
      message.error('创建快照失败');
    }
  };

  const handleRevert = async (snapshotId: string) => {
    try {
      // 调用恢复快照 API
      message.success('已恢复到该快照');
    } catch (error) {
      message.error('恢复快照失败');
    }
  };

  const handleDelete = async (snapshotId: string) => {
    try {
      // 调用删除快照 API
      message.success('快照已删除');
      // 刷新快照列表
    } catch (error) {
      message.error('删除快照失败');
    }
  };

  const columns: TableColumnsType<Snapshot> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
    },
    {
      title: '大小',
      dataIndex: 'size',
      key: 'size',
      render: (size: number) => `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`,
    },
    {
      title: '操作',
      key: 'actions',
      render: (_, record) => (
        <Space>
          <Button
            type="link"
            icon={<RollbackOutlined />}
            onClick={() => handleRevert(record.id)}
          >
            恢复
          </Button>
          <Popconfirm
            title="确定要删除这个快照吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="删除"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '16px' }}>
      <Card
        title={
          <Space>
            <CameraOutlined />
            快照管理
          </Space>
        }
        extra={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => setModalVisible(true)}
          >
            创建快照
          </Button>
        }
      >
        <Table
          columns={columns}
          dataSource={snapshots}
          rowKey="id"
          loading={loading}
          locale={{ emptyText: '暂无快照' }}
        />
      </Card>

      <Modal
        title="创建快照"
        open={modalVisible}
        onCancel={() => {
          setModalVisible(false);
          form.resetFields();
        }}
        onOk={() => form.submit()}
      >
        <Form form={form} layout="vertical" onFinish={handleCreate}>
          <Form.Item
            label="快照名称"
            name="name"
            rules={[{ required: true, message: '请输入快照名称' }]}
          >
            <Input placeholder="例如: snapshot-20240101" />
          </Form.Item>

          <Form.Item label="描述" name="description">
            <Input.TextArea
              rows={3}
              placeholder="快照说明（可选）"
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SnapshotsTab;